<template>
  <li :class="[{ first: isFirst },'ui-time-line' ]"><slot></slot></li>
</template>
<script>
  export default {
    name: 'TimeLine',
    props: {
      isFirst: Boolean
    },
    data () {
      return {
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .ui-time-line
    margin-top 13px
    position relative
    color $cf-gray3
    z-index 10
    &:before
      content ""
      width 11px
      height 11px
      display inline-block
      position relative
      top 4px
      margin 0px 10px 0 0
      border-radius 6px
      background-color $c-border1
      z-index 10
    &:after
      content ""
      width 1px
      height 20px
      display inline-block
      position absolute
      top 13px
      left 5px
      margin-right 12px
      border-radius 6px
      z-index -1
      background-color $c-border1
    &:last-child
      &:after
        width 0
        height 0
  .first
    &:first-child
      &:before
        background-color $c-pink
</style>
